src/app/(landing)/class/[slug]/(learning)/qa/write/page.tsx (1)

95-105: 💤 Low value

handleSaveDraft에서 빈 내용 검증이 누락되었습니다.

handleSubmit에서는 text 내용이 비어있는지 검증하지만(Line 112-115), handleSaveDraft는 레슨 선택만 검증합니다. 사용자가 내용 없이 임시저장할 수 있으며, 이는 의도된 동작일 수도 있지만 피드 작성 페이지의 handleSaveDraft와 일관성이 없습니다.

💡 피드 페이지와 일관된 검증 추가 제안

 function handleSaveDraft() {
   if (!selectedLessonId) {
     showToast('레슨을 선택해주세요.', 'error');
     return;
   }
+  if (!text.replace(/<[^>]*>/g, '').trim()) {
+    showToast('내용을 입력해주세요.', 'error');
+    return;
+  }
   localStorage.setItem(
     `course-qna-draft-${slug}`,
     JSON.stringify({ content: text, lessonId: selectedLessonId }),
   );
   showToast('임시저장되었습니다.');
 }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/`(landing)/class/[slug]/(learning)/qa/write/page.tsx around lines 95
- 105, handleSaveDraft currently only checks selectedLessonId and allows saving
when text is empty; update handleSaveDraft to validate that text is non-empty
(same as handleSubmit) before calling localStorage.setItem: if text is empty,
call showToast with the same empty-content error message and return. Keep the
existing localStorage key (`course-qna-draft-${slug}`) and payload shape ({
content: text, lessonId: selectedLessonId }) and ensure you reference the same
variables (handleSaveDraft, selectedLessonId, text, slug) so behavior matches
handleSubmit.

src/app/(service)/(my)/my-class/page.tsx (3)

44-48: 💤 Low value

localStorage 초기 로딩 시 깜빡임 개선 고려

현재 locallyDisabled 상태가 false로 시작한 후 useEffect에서 localStorage를 읽어 업데이트하므로, 실제로 비활성화된 상태였다면 초기 렌더링 시 잠깐 활성화된 UI가 보이다가 곧바로 비활성 UI로 전환되는 깜빡임(FOUC)이 발생할 수 있습니다.

사용자 경험 개선을 위해 mounting 상태를 추적하여 첫 로드 시 로딩 상태를 표시하거나, 또는 useState의 lazy initialization을 활용하는 방법을 고려할 수 있습니다. (단, SSR 환경에서는 여전히 제약이 있으므로 mounting 플래그가 더 안전합니다.)

개선 예시

  const [locallyDisabled, setLocallyDisabled] = useState(false);
+ const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setLocallyDisabled(
      localStorage.getItem(NOTIFICATION_DISABLE_KEY) === 'true',
    );
+   setMounted(true);
  }, []);

+ if (!mounted) {
+   return <div>로딩 중...</div>; // 또는 스켈레톤 UI
+ }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/`(service)/(my)/my-class/page.tsx around lines 44 - 48, The initial
render causes a flash because locallyDisabled is initialized to false then
updated inside useEffect; change initialization to read localStorage lazily
(e.g., useState(() => typeof window !== 'undefined' ?
localStorage.getItem(NOTIFICATION_DISABLE_KEY) === 'true' : false)) or, safer
for SSR, add a mounting flag (isMounted state set to true in useEffect) and
render a loading/placeholder until isMounted is true before using
locallyDisabled; update references to useEffect, setLocallyDisabled,
locallyDisabled and NOTIFICATION_DISABLE_KEY accordingly so the UI doesn't
render the wrong state on first paint.

---

74-86: 💤 Low value

ToggleSwitch className에 cn() 사용 권장

프로젝트 가이드라인에 따르면 모든 className 조합은 cn() 함수를 사용하도록 되어 있습니다. 현재 코드는 정상 동작하지만, 일관성을 위해 cn()을 사용하는 것을 권장합니다.

♻️ 개선 제안

  <ToggleSwitch.Root
    checked={isEnabled}
    onCheckedChange={(checked) => {
      if (checked) {
        setAlarmModalOpen(true);
      } else {
        setDisableModalOpen(true);
      }
    }}
    size="lg"
-   className="bg-border-subtle data-[state=checked]:bg-fill-brand-default-default"
+   className={cn(
+     "bg-border-subtle",
+     "data-[state=checked]:bg-fill-brand-default-default"
+   )}
  />

As per coding guidelines: "Always use cn() function for className composition in React components. Do not use template literal classNames."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/`(service)/(my)/my-class/page.tsx around lines 74 - 86, The
ToggleSwitch.Root component is using a raw className string instead of the
project's className composer; update the className prop on ToggleSwitch.Root to
call the shared cn() helper (e.g., cn("bg-border-subtle",
"data-[state=checked]:bg-fill-brand-default-default")) so all class composition
follows the guideline; locate the ToggleSwitch.Root usage in page.tsx and
replace the literal className value with a cn(...) call while keeping the
existing classes and other props (checked, onCheckedChange, size) unchanged.

---

27-64: localStorage 기반 알림 비활성화의 다중 기기 사용성 고려

현재 알림 비활성화 상태를 localStorage에 저장하는 설계는 디바이스별로 독립적으로 관리됩니다. 이는 다음과 같은 특성이 있습니다:

• 사용자가 여러 기기(PC, 모바일 등)를 사용하는 경우, 한 기기에서 끈 알림이 다른 기기에는 반영되지 않음
• 브라우저 캐시 삭제 시 설정이 초기화됨
• 서버 설정(notificationSetting.isEnabled)과 클라이언트 설정이 분리되어 관리됨

사용자가 "모든 기기에서 일괄적으로 알림을 끄고 싶다"는 요구가 있을 경우, 향후 서버 측에 임시 비활성화 플래그를 추가하는 것을 고려할 수 있습니다. 현재 설계가 의도된 것이라면 사용자에게 이 동작을 명확히 안내하는 것도 도움이 될 수 있습니다.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/`(service)/(my)/my-class/page.tsx around lines 27 - 64, The current
per-device disable uses localStorage (NOTIFICATION_DISABLE_KEY) which won't sync
across devices; either (A) persist the disable flag server-side by adding an API
and updating useGetNotificationSetting to return a user-scoped disable flag and
modify handleDisableConfirm and handleAlarmSuccess to call that API (instead of
localStorage) so notificationSetting.isEnabled reflects the server state, or (B)
keep localStorage but update the UI (near the disable modal and in MyClassPage
where isEnabled is computed) to show a clear notice that "Disabling is
device-specific and will not affect other devices or survive browser cache
clears"; choose one and update the functions handleDisableConfirm,
handleAlarmSuccess, and the useGetNotificationSetting integration accordingly.

src/hooks/queries/course/course-api.ts (1)

972-976: ⚡ Quick win

status 파라미터 타입을 리터럴 유니온으로 좁혀 주세요.

현재 status?: string 이라서 잘못된 상태값이 API 파라미터/쿼리키에 들어가도 컴파일 단계에서 걸러지지 않습니다. status?: 'DRAFT' | 'PUBLISHED'(또는 공용 타입)으로 제한하는 편이 안전합니다.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/hooks/queries/course/course-api.ts` around lines 972 - 976, The status
parameter on useGetMyBuilderFeedManagement is typed too broadly as string;
narrow it to a literal union (e.g., status?: 'DRAFT' | 'PUBLISHED') or reuse a
shared enum/type if one exists (e.g., FeedStatus) to ensure invalid values are
caught at compile time; update the function signature for
useGetMyBuilderFeedManagement and any referenced types passed into the API/React
Query key so callers and query keys use the new union/type consistently.

src/app/(service)/(my)/my-posts/page.tsx (1)

107-110: ⚡ Quick win

src/app 경로에서 Tailwind base/하드코딩 색상 클래스를 토큰 클래스로 치환해 주세요.

border-rose-500, text-gray-800, bg-white, shadow-md 같은 클래스는 이 경로 규칙과 충돌합니다. 프로젝트 토큰(text-text-*, border-border-*, bg-fill-*, shadow-*)으로 통일하는 게 필요합니다.

As per coding guidelines "src/app/**/*.{tsx,jsx}: Never use Tailwind base classes ... Always use project custom tokens from global.css".

Also applies to: 126-127, 296-297, 313-314, 377-377, 396-396

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/`(service)/(my)/my-posts/page.tsx around lines 107 - 110, Replace
Tailwind base color/utility classes in the page component className strings with
the project's token classes: where you see `border-rose-500` use the border
token family (`border-border-*`), `text-gray-800` -> `text-text-*`, `bg-white`
-> `bg-fill-*`, and `shadow-md` -> `shadow-*`; update the conditional used
around `activeTab === id` (the class string that chooses `'border-b-2
border-rose-500 text-rose-500'` vs `'font-designer-20r text-gray-800'`) and the
other occurrences referenced (near the other className strings at the noted
ranges) to use `border-border-...`, `text-text-...`, `bg-fill-...`, and
`shadow-...` tokens respectively so all classes under src/app use the project
tokens from global.css.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

src/components/payment/modals/class-refund-request-modal.tsx (2)

49-51: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

환불 사유 검증이 여전히 런타임 가드 없이 처리되고, 누락 시 무응답입니다.

reason 누락 시 조용히 반환하고(Line 50), 드롭다운 값도 bare as로 단언하고 있어 잘못된 값 유입 시 UX/안정성이 떨어집니다. 가드 + 토스트 처리로 바꿔 주세요.

수정 예시

 import { useRequestCourseRefund } from '`@/hooks/queries/course/course-api`';
+import { useToastStore } from '`@/stores/use-toast-store`';
 import type { CourseRefundReasonCode } from '`@/types/api/course.types`';

+const REFUND_REASON_GUARD: Record<CourseRefundReasonCode, true> = {
+  REPAYMENT_AFTER_METHOD_CHANGE: true,
+  DUPLICATE_PAYMENT: true,
+  CHANGE_OF_MIND: true,
+  UNSATISFIED_CONTENT: true,
+  TECHNICAL_ISSUE: true,
+  OTHER: true,
+};
+
+const isCourseRefundReasonCode = (
+  value: unknown,
+): value is CourseRefundReasonCode =>
+  typeof value === 'string' && value in REFUND_REASON_GUARD;
+
 export default function ClassRefundRequestModal({
@@
 }: ClassRefundRequestModalProps) {
+  const showToast = useToastStore((state) => state.showToast);
@@
   const handleConfirm = () => {
-    if (!reason) return;
+    if (!reason) {
+      showToast('환불 사유를 선택해 주세요.', 'error');
+      return;
+    }
@@
                 <SingleDropdown
                   options={REFUND_REASONS}
                   value={reason}
-                  onChange={(v) => setReason(v as CourseRefundReasonCode)}
+                  onChange={(v) => {
+                    if (!isCourseRefundReasonCode(v)) {
+                      showToast('유효하지 않은 환불 사유예요.', 'error');
+                      return;
+                    }
+                    setReason(v);
+                  }}
                   placeholder="사유를 선택해 주세요."
                   size="l"
                 />

As per coding guidelines "src/components/**/*.{ts,tsx}: Guard handlers for optional fields ... show a toast error message if required data is unavailable" and "Use the in guard operator with fallback ... Never use bare as assertions without runtime guards".

Also applies to: 140-144

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/payment/modals/class-refund-request-modal.tsx` around lines 49
- 51, handleConfirm currently silently returns when reason is missing and uses
bare "as" assertions for dropdown values; change it to runtime-guard the reason
and dropdown value before calling requestRefund: inside handleConfirm check that
reason is present using an "in" or truthy guard and if missing call the toast
error helper (show a user-facing error) and return; for the dropdown value
replace bare "as" assertions with a guarded type check (using "in" or a
validated fallback) so you only pass a well-formed value to requestRefund; apply
the same guard+toast pattern to the other handler around the 140-144 section.

---

45-47: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

닫았다가 재오픈하면 이전 요청의 성공 콜백이 새 모달 상태를 덮어쓸 수 있습니다.

closedRef를 open=true에서 즉시 false로 되돌려서, 이전 in-flight 요청이 늦게 성공하면 새 세션에서 setStep('complete')가 다시 실행될 수 있습니다. 요청 단위 식별자(ref)를 같이 써서 stale 콜백을 무효화해 주세요.

수정 예시

   const { mutate: requestRefund, isPending } = useRequestCourseRefund();
   const closedRef = useRef(false);
+  const requestSeqRef = useRef(0);

   useEffect(() => {
-    if (open) closedRef.current = false;
+    if (!open) {
+      closedRef.current = true;
+      requestSeqRef.current += 1; // close 시 이전 요청 콜백 무효화
+    }
   }, [open]);

   const handleConfirm = () => {
     if (!reason) return;
+    const requestSeq = ++requestSeqRef.current;
+    closedRef.current = false;
     requestRefund(
       {
         paymentId,
@@
       {
         onSuccess: () => {
-          if (!closedRef.current) setStep('complete');
+          if (closedRef.current || requestSeq !== requestSeqRef.current) return;
+          setStep('complete');
         },
       },
     );
   };

   const handleClose = () => {
     closedRef.current = true;
+    requestSeqRef.current += 1;
     onOpenChange(false);
     setStep('form');
     setReason(undefined);
     setDetail('');
   };

   const handleCompleteClose = () => {
+    closedRef.current = true;
+    requestSeqRef.current += 1;
     onOpenChange(false);
     setStep('form');
     setReason(undefined);
     setDetail('');
     router.push('/class-payment-management');
   };

Also applies to: 60-62, 68-73

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/payment/modals/class-refund-request-modal.tsx` around lines 45
- 47, The current useEffect resets closedRef on open which allows a previous
in-flight request's success callback to affect a newly opened modal; add a
per-request identifier ref (e.g., requestIdRef) that's incremented whenever the
modal opens (inside the same useEffect or open handling), capture the current id
when starting each async request, and in every success/finally callback (where
setStep('complete') or other state updates occur) check that the captured id
still matches requestIdRef.current before calling setStep or touching state;
apply the same pattern to the other request sites mentioned (around the blocks
corresponding to lines ~60-62 and ~68-73) so stale callbacks are ignored.